<template>
  <div class="card">
    <div class="card-header">
      <div class="crad-header-icon"></div>
      <div class="crad-header-title">{{ title }}</div>
      <card-header-button-group :btns="btns" :more="more" @card-header-button-group-event="operationClickHanlder" ></card-header-button-group>
    </div>
    <div class="card-slot">
      <slot>
        <vuescroll></vuescroll>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "card",
  props: {
    type: {
      type: String,
      default: "default",
    },
    title: String,
    width: String,
    btns: Array,
    more:Array
  },
  watch: {
    title: {
      handler(newVal) {
        this.$store.dispatch("tabs/changeName", {
          path: this.$route.path,
          name: newVal,
        });
      },
    },
  },
  mounted() {
    this.$store.dispatch("tabs/changeName", {
      path: this.$route.path,
      name: this.title,
    });
  },
  computed: {
    btnsRreated() {
      let newBtns = [];
      this.btns.forEach((btn) => {
        if (typeof btn == "string") {
          if (btn == "save") {
            btn = {
              id: "save",
              label: "保存",
            };
          }
          if (btn == "save-audit") {
            btn = {
              id: "save-audit",
              label: "保存并审核",
            };
          }
          if (btn == "back") {
            btn = {
              id: "back",
              label: "返回",
              before: this.backHandler,
            };
          }
          newBtns.push(btn);
        } else {
          newBtns.push(btn);
        }
      });
      return newBtns;
    },
  },
  methods: {
    operationClickHanlder(item,callback) {
      this.$emit(item.trigger,callback)
    },
    backHandler() {
      this.$store.dispatch("tabs/close", this.$store.state.tabs.currTabs);
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  height: 100%;
  .card-header {
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    .crad-header-icon {
      height: 30px;
      width: 6px;
      margin-left: 15px;
      margin-right: 9px;
      background-color: #22d3a7;
      border-radius: 5px;
    }
    .crad-header-title {
      font-size: 18px;
      font-weight: bold;
    }
    .card-header-button-group {
      position: absolute;
      right: 30px;
      top: 60px;
    }
  }
  .card-slot {
    height: calc(100% - 90px);
    width: calc(100% - 60px);
    margin: 10px 30px 30px 30px;
    overflow: hidden;
    >div{
      height: calc(100% - 0px);
      width: calc(100% - 0px);
    }
  }
}
// .card-index,
// .card-form {
//   margin-bottom: 0px !important;
//   .card-title {
//     // &:before{
//     //     content: ' ';
//     //     background-color: #DCDFE6;
//     //     width: calc(100% + 35px);
//     //     position: absolute;
//     //     height: 1.5px;
//     //     bottom: -10px;
//     //     left: -15px;
//     // }
//   }
//   .card-slot {
//     overflow-y: scroll;
//     overflow-x: hidden;
//   }
//   .card-operation-btns {
//     position: absolute;
//     right: 10px;
//   }
// }
// .card {
//   background-color: #ffffff;
//   border-radius: 5px;
//   box-shadow: 1px 1px 5px #e8eaec;
//   padding: 10px 30px;
//   position: relative;
//   height: calc(100% - 20px);
//   .card-slot {
//     padding: 20px 10px;
//     height: calc(100% - 80px);
//     position: relative;
//   }
//   .card-title {
//     height: 30px;
//     display: flex;
//     align-items: center;
//     font-weight: bold;
//     position: relative;
//     font-size: 18px;
//     padding: 0 10px;
//     .card-title-icon {
//       background-color: #22d3a7;
//       width: 6px;
//       border-radius: 5px;
//     }
//     .card-title-icon,
//     .card-title-loding {
//       display: inline-block;
//       height: 30px;
//       position: absolute;
//       left: -10px;
//     }
//   }
// }
</style>